<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="centent">

			<view class="cententList">
				<view class="cententLisItems" style="background-color: #6FC954;" @click="$next(`/pages/index/articleDetail?id=5`)">
					<image src="@/static/index/diangailicheng.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						电改历程
					</view>
				</view>
				<image src="@/static/index/creen1.png" style="width: 56rpx;height: 14rpx;margin: 0 10rpx;"></image>
				<view class="cententLisItems" style="background-color: #51BFA1;" @click="$next(`/pages/index/articleDetail?id=6`)">
					<image src="@/static/index/dianlizhengce.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						电力政策
					</view>
				</view>
				<image src="@/static/index/creen1.png" style="width: 56rpx;height: 14rpx;margin: 0 10rpx;"></image>
				<view class="cententLisItems" style="background-color: #FFA12A;" @click="$next(`/pages/index/articleDetail?id=9`)">
					<image src="@/static/index/yongjinjiedu.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						佣金解读
					</view>
				</view>
			</view>

		

			<view class="cententList">
				<view class="cententLisItems" style="background-color: #3975EA;" @click="$next(`/pages/index/articleDetail?id=11`)">
					<image src="@/static/index/qianyuexiezhu.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						签约协助
					</view>
				</view>
				<image src="@/static/index/creen1.png" style="width: 56rpx;height: 14rpx;margin: 0 10rpx;"></image>
				<view class="cententLisItems" style="background-color: #DEB68B;" @click="$next(`/pages/index/articleDetail?id=8`)">
					<image src="@/static/index/tanpanjiqiao.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						谈判技巧
					</view>
				</view>
				<image src="@/static/index/creen1.png" style="width: 56rpx;height: 14rpx;margin: 0 10rpx;"></image>
				<view class="cententLisItems" style="background-color: #4EC7FF;"  @click="$next(`/pages/index/articleDetail?id=10`)">
					<image src="@/static/index/xunzhaokehu.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						寻找客户
					</view>
				</view>
				<image src="@/static/index/creen1.png" style="width: 56rpx;height: 14rpx;margin: 0 10rpx;"></image>
				<view class="cententLisItems" style="background-color: #FE6767;" @click="$next(`/pages/index/articleDetail?id=7`)">
					<image src="@/static/index/jiaoyiguize.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="cententLisItemsTxt">
						交易规则
					</view>
				</view>
			</view>

			<view class="cententListtxt">
				* 点开查看相应版块的详细内容
			</view>
		</view>
		<view class="foodter">
		
			<u-tabs :list="tagList" :is-scroll="false" :current="tagIdx" @change="change"></u-tabs>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="kuai">
					<image src="@/static/index/tuwen.png" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="txt u-line-1" v-if="tagType == 1" @click="$next(`/pages/index/courseDetail?id=${item.id}`)">
					{{item.title}}
				</view>
				<view class="txt u-line-1" v-else @click="$next(`/pages/index/problemDetail?id=${item.id}`)">
					{{item.title}}
				</view>
			</view>
			<u-loadmore v-if="list.length !== 0" :status="status" />
			<image v-else src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: [],
				tagIdx: 0,
				tagType:1,
				videoSwitch: 0,
				status:'loadmore',
				more: false,
				page: 1, //页码
				limit: 20, //条数
				list: [], //
			}
		},
		onLoad() {
			this.getVideoSwitch()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		//上拉加载
		onReachBottom() {
			if (this.page == 1) {
				return
			}
			if (this.status == 'loadmore') {
				this.getList()
			}
		},
		methods: {
			change(idx) {
				this.tagIdx = idx
				this.tagType = this.tagList[this.tagIdx].type
				this.page = 1
				this.more = false
				this.status = 'loadmore'
				this.getList()
			},
			getList() {
				let apiUrl = this.$api.getCourseRes
				if(this.tagList[this.tagIdx].type == 2){
					apiUrl = this.$api.getProblemRes
				}
				this.status = 'loading'
				this.$axios.request(apiUrl, "GET", {
					page: this.page,
					limit: this.limit,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {
					uni.stopPullDownRefresh()
					this.list = this.page == 1 ? val.data.list : this.list.concat(val.data.list)
					if (Math.ceil(val.data.total / this.limit) > this.page) {
						this.status = 'loadmore'
						this.page++
					} else {
						this.status = 'nomore'
					}
				})
			},
			getVideoSwitch() {
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "VIDEO_SWITCH"
				}).then((val) => {
					this.videoSwitch = val.data.paramValue
					if (this.videoSwitch == 1) {
						this.tagList = [{
							name: '视频学习',
							type:1,
						}, {
							name: '图文学习',
							type:2,
						}]
					}else{
						this.tagList = [ {
							name: '图文学习',
							type:2,
						}]
					}
					this.tagType = this.tagList[this.tagIdx].type
					this.getList()
				})
			},
		}
	}
</script>

<style>
	.page {
		width: 100%;
		/* background-color: #F3F4F8; */
	}

	.centent {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
		width: 100%;
		margin-top: 16rpx;
		height: 437rpx;
		padding-bottom: 36rpx;
		/* padding:16rpx 0; */
		background-color: #FFFFFF;
	}

	.cententList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 120rpx;
		/* background-color: red; */
	}

	.cententLisItems {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		background-color: #6FC954;
	}

	.cententLisItemsTxt {
		height: 28rpx;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 28rpx;
		text-align: center;
		margin-top: 12rpx;
		color: #FFFFFF;
	}

	.xiangxia {
		width: 100%;
		height: 53rpx;
		margin: 10rpx 0;
	}

	.tabBox {
		width: 100%;
		height: 69rpx;
		background-color: #E8F0FF;
		margin-bottom: 30rpx;
	}

	.foodter {
		/* overflow-y: auto; */
		width: 100%;
		/* height: 880rpx; */
		margin-top: 16rpx;
		padding: 32rpx 0;
		background-color: #FFFFFF;
	}

	.list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 65rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.txt {
		width: 666rpx;
		padding: 0 10rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.kuai {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.foodterTxt {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40px;
		color: #333333;
		padding: 0 32rpx;
		margin-bottom: 50rpx;
	}

	.cententListtxt {
		position: absolute;
		left: 36rpx;
		bottom: 16rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #333333;
	}
</style>
